/* eslint-disable no-template-curly-in-string */

import React, { useRef, useState, useEffect } from "react";

import Dropdown from "antd/lib/dropdown";
import Button from "antd/lib/button";
import Menu from "antd/lib/menu";
import Input from "antd/lib/input";
import Badge from 'antd/lib/badge';

import HelpTrigger from "@/components/HelpTrigger";
import CreateDashboardDialog from "@/components/dashboards/CreateDashboardDialog";
import navigateTo from "@/components/ApplicationArea/navigateTo";
import { currentUser, Auth, clientConfig } from "@/services/auth";
import logoUrl from "@/assets/images/redash_icon_small.png";
import Alert from "@/services/alert";
import DownOutlined from "@ant-design/icons/DownOutlined";
import MenuOutlined from "@ant-design/icons/MenuOutlined";
import "./index.less";
import { BorderTopOutlined } from '@ant-design/icons';
import Cookies from 'js-cookie';
import QuestionCircleOutlinedIcon from "@ant-design/icons/QuestionCircleOutlined";
function onSearch(q) {
  navigateTo(`queries?q=${encodeURIComponent(q)}`);
}

function DesktopNavbar() {
  const [noreadCount,setNoreadCount]= useState(0)
  const downloadfile = () => {
    let  filename='contracts_help.doc';
    let AjaxUrl = 'api/upload/downloadfile';
    fetch(AjaxUrl ,{
     method: 'POST',
     body: window.JSON.stringify({filename: filename}),
     credentials: 'include',
     headers: new Headers({
       'Content-Type': 'application/json'
     })}).then((response) => {
     response.blob().then(blob => {
       const aLink = document.createElement('a');
       document.body.appendChild(aLink);
       aLink.style.display='none';
       const objectUrl = window.URL.createObjectURL(blob);
       aLink.href = objectUrl;
       aLink.download = '合同管理办法-完善制度.doc';
       aLink.click();
       document.body.removeChild(aLink);
     });
   }).catch((error) => {
     console.log(error);
   });
 };
  // useEffect(()=>{
  //   Alert.noread().then(r => setNoreadCount(r.data));
  // })
  function menuStyle() {
    Cookies.set('menustyle','vertical',{ expires:365 });
    window.location.reload();    
  }
  return (
    <div className="app-header" data-platform="desktop">
      <div>
        <div className="header-logo">
          <a href="./">
            <img src={logoUrl} alt="首页" title="首页" />
          </a>
        </div>
        <Menu mode="horizontal" selectable={false}>
          <Menu.Item key="contracts" className="dropdown-menu-item">
          <Button href="contracts">合同台账</Button>
          <Dropdown
            trigger={["click"]}
            placement="bottomLeft"
            overlay={
              <Menu className="favorites-dropdown">
              <Menu.Item>
                <a href="contracts/apply">合同申请单</a>
              </Menu.Item>
              <Menu.Item>
                <a href="contracts">订立中的合同</a>
              </Menu.Item>
              <Menu.Divider />
              <Menu.Item>
                <a href="contracts/seal">合同用印</a>
              </Menu.Item>
              <Menu.Item>
                <a href="contracts/record">合同备案</a>
              </Menu.Item>
              <Menu.Item>
                <a href="contracts/change">合同变更申请单</a>
              </Menu.Item>
              <Menu.Item>
                <a href="contracts/progress">合同违约登记单</a>
              </Menu.Item>
              <Menu.Item>
                <a href="contracts/settle">合同付款单</a>
              </Menu.Item>
              <Menu.Divider />
              <Menu.Item>
                <a href="contracts/stop">合同终止申请单</a>
              </Menu.Item>
              <Menu.Item>
                <a href="contracts/finish">合同验收申请单</a>
              </Menu.Item>
              {currentUser.isRecord && <Menu.Divider />}
              {currentUser.isRecord && (
                <Menu.Item>
                  <a href="contracts/all">备案的合同</a>
                </Menu.Item>
              )}
              </Menu>
            }><DownOutlined />
          </Dropdown>
          </Menu.Item>

          <Menu.Item key="report" className="dropdown-menu-item">
          <Button href="dashboards">报表</Button>
          <Dropdown
            trigger={["click"]}
            placement="bottomLeft"
            overlay={
              <Menu className="favorites-dropdown">
                {currentUser.isAdminOrDefault && (
                <Menu.Item>
                  <a href="queries/new">新建查询</a>
                </Menu.Item>
                )}
                {currentUser.isAdminOrDefault && (
                <Menu.Item>
                  <a onMouseUp={() => CreateDashboardDialog.showModal()}>新建报表</a>
                </Menu.Item>
                )}
                {currentUser.isAdminOrDefault && (
                  <Menu.Divider />
                )}
                {currentUser.isAdminOrDefault && (
                  <Menu.Item>
                    <a href="queries">查询</a>
                  </Menu.Item>
                )}
                <Menu.Item>
                  <a href="dashboards">报表</a>
                </Menu.Item>
              </Menu>
            }><DownOutlined />
          </Dropdown>
          </Menu.Item>
          <Menu.Item key="alerts" className="dropdown-menu-item">
          <Badge count={noreadCount}>  
            <Button href="alerts">提醒</Button>
          </Badge>
          <Dropdown
          trigger={["click"]}
          placement="bottomLeft"
          overlay={
            <Menu className="favorites-dropdown">
              <Menu.Item key="new-alert">
                <a href="alerts">提醒</a>
              </Menu.Item>
              <Menu.Divider />
              <Menu.Item key="new-alert">
                <a href="alerts/new">新建提醒</a>
              </Menu.Item>
            </Menu>
            }><DownOutlined />
          </Dropdown>
          </Menu.Item>
        </Menu>
        {currentUser.isAdminOrDefault && (
          <Dropdown
            trigger={["click"]}
            overlay={
            <Menu>
              {currentUser.isDefault && (
              <Menu.Item>
                <a href="contract/apply/new/0">合同申请单</a>
              </Menu.Item>
              )}
              {currentUser.isDefault && (
              <Menu.Item>
                <a href="contract/new/0">合同</a>
              </Menu.Item>
              )}
              {currentUser.isSeal && (
              <Menu.Item>
                <a href="contract/seal/new/0">合同用印</a>
              </Menu.Item>
              )}
              {currentUser.isRecord && (
              <Menu.Item>
                <a href="contract/record/new/0">合同备案</a>
              </Menu.Item>
              )}
              <Menu.Divider />
              {currentUser.isDefault && (
              <Menu.Item>
                <a href="contract/change/new/0">合同变更申请单</a>
              </Menu.Item>
              )}
              {currentUser.isDefault && (
              <Menu.Item>
                <a href="contract/progress/new/0">合同违约登记单</a>
              </Menu.Item>
              )}
              {currentUser.isDefault && (
              <Menu.Item>
                <a href="contract/settle/new/0">合同付款单</a>
              </Menu.Item>
              )}
              {currentUser.isDefault && (
              <Menu.Item>
                <a href="contract/stop/new/0">合同终止申请单</a>
              </Menu.Item>
              )}
              {currentUser.isDefault && (
              <Menu.Item>
                <a href="contract/finish/new/0">合同验收申请单</a>
              </Menu.Item>
              )}
            </Menu>
            }>
            <Button type="primary" data-test="CreateButton">
              新建 <DownOutlined />
            </Button>
          </Dropdown>
        )}
      </div>
      <div>
      {/* <Input.Search placeholder="搜索..." data-test="AppHeaderSearch" onSearch={onSearch} enterButton/> */}
        <Input.Search className="searchbar" placeholder="搜索..."
          data-test="AppHeaderSearch"
          onSearch={onSearch} enterButton
        />
        <Menu mode="horizontal" selectable={false}>
          <Menu.Item key="help">
            {/* <HelpTrigger type="HOME" className="menu-item-button" /> */}
              <a href="notice/new">
             {/* <a onClick={downloadfile}> */}
             <QuestionCircleOutlinedIcon />
                        <span>资料</span>
                      </ a>
          </Menu.Item>
          <Menu.Item key="style">
                      <a onClick={menuStyle}>
                        <BorderTopOutlined />
                        <span>风格</span>
                      </ a>
          </Menu.Item>
          {currentUser.isAdmin && (
            <Menu.Item key="settings"  className="dropdown-menu-item">
              <Button  href="globalsetting">设置</Button>
              <Dropdown
                placement="bottomRight"
                trigger={["click"]}
                overlay={
                  <Menu>
                    {currentUser.isAdmin && (
                    <Menu.Item key="enums">
                      <a href="enums">枚举设置</a>
                    </Menu.Item>
                    )}
                    <Menu.Divider />
                    {currentUser.isAdmin && (
                    <Menu.Item key="groups">
                      <a href="orgstruct">部门</a>
                    </Menu.Item>
                    )}
                    {currentUser.isAdmin && (
                    <Menu.Item key="groups">
                      <a href="templates">合同模板</a>
                    </Menu.Item>
                    )}
                    {currentUser.isAdmin && (
                    <Menu.Item key="groups">
                      <a href="workflow">审批流程</a>
                    </Menu.Item>
                    )}
                    {currentUser.isAdmin && (
                    <Menu.Item key="groups">
                      <a href="tabletype">单据号设置</a>
                    </Menu.Item>
                    )}
                    {currentUser.isAdmin && (
                    <Menu.Item key="groups">
                      <a href="customertemp">合同单位</a>
                    </Menu.Item>
                    )}
                    {currentUser.isAdmin && (
                    <Menu.Item key="groups">
                      <a href="globalsetting">全局参数设置</a>
                    </Menu.Item>
                    )}
                  </Menu>
              }><DownOutlined />
            </Dropdown>
          </Menu.Item>
          )}
          <Menu.Item key="profile"  className="dropdown-menu-item">
            <Button   href="users/me"  data-test="ProfileDropdown" className="profile-dropdown">
                <img src={currentUser.profile_image_url} alt={currentUser.name} />
                {currentUser.name}
              </Button>
            <Dropdown
              overlayStyle={{ minWidth: 200 }}
              placement="bottomRight"
              trigger={["click"]}
              overlay={
                <Menu>
                  <Menu.Item key="profile">
                    <a href="users/me">个人设置</a>
                  </Menu.Item>
                  {currentUser.isAdmin && <Menu.Divider />}
                  {currentUser.isAdmin && (
                    <Menu.Item key="groups">
                      <a href="data_sources">数据源</a>
                    </Menu.Item>
                  )}
                  {currentUser.isAdmin && (
                    <Menu.Item key="groups">
                      <a href="groups">权限组</a>
                    </Menu.Item>
                  )}
                  {currentUser.isAdmin && (
                    <Menu.Item key="users">
                      <a href="users">用户</a>
                    </Menu.Item>
                  )}
                  {/* {currentUser.isAdmin && (
                    <Menu.Item key="destinations">
                      <a href="destinations">提醒设置</a>
                    </Menu.Item>
                  )} */}
                  {currentUser.isAdmin && <Menu.Divider />}
                  {currentUser.isAdmin && (
                    <Menu.Item key="status">
                      <a href="admin/status">系统状态</a>
                    </Menu.Item>
                  )}
                  <Menu.Divider />
                  <Menu.Item key="logout" onClick={() => Auth.logout()}>
                    退出
                  </Menu.Item>
                  <Menu.Divider />
                  <Menu.Item key="version" disabled>
                    版本:1.0 基于Redash{clientConfig.version}
                  </Menu.Item>
                </Menu>
              }><DownOutlined />
            </Dropdown>
          </Menu.Item>
        </Menu>
      </div>
    </div>
  );
}

function MobileNavbar() {
  const ref = useRef();

  return (
    <div className="app-header" data-platform="mobile" ref={ref}>
      <div className="header-logo">
        <a href="./">
          <img src={logoUrl} alt="Dazdata" />
        </a>
      </div>
      <div>
        <Dropdown
          overlayStyle={{ minWidth: 200 }}
          trigger={["click"]}
          getPopupContainer={() => ref.current} // so the overlay menu stays with the fixed header when page scrolls
          overlay={
            <Menu mode="vertical" selectable={false}>
              {currentUser.isNotAdmin && (
                <Menu.Item key="dashboards">
                  <a href="dashboards">报表</a>
                </Menu.Item>
              )}
              {currentUser.isDefaultOrAudit && (
                <Menu.Item key="queries">
                  <a href="queries">查询</a>
                </Menu.Item>
              )}
              <Menu.Item key="alerts">
                <a href="alerts">消息中心</a>
              </Menu.Item>
              <Menu.Item key="profile">
                <a href="users/me">个人设置</a>
              </Menu.Item>
              <Menu.Divider />
              {currentUser.isAdmin && (
                <Menu.Item key="status">
                  <a href="admin/status">系统状态</a>
                </Menu.Item>
              )}
              {currentUser.hasPermission("super_admin") && <Menu.Divider />}
              <Menu.Item key="help">
                {/* eslint-disable-next-line react/jsx-no-target-blank */}
                <a href="https://redash.io/help" target="_blank" rel="noopener">
                  帮助
                </a>
              </Menu.Item>
              <Menu.Item key="logout" onClick={() => Auth.logout()}>
                退出
              </Menu.Item>
            </Menu>
          }>
          <Button>
            <MenuOutlined />
          </Button>
        </Dropdown>
      </div>
    </div>
  );
}

export default function ApplicationHeader() {
  return (
    <nav className="app-header-wrapper">
      <DesktopNavbar />
      <MobileNavbar />
    </nav>
  );
}
